<template>
  <div class="goods-items">
    <div class="goods-item" v-for="(item, index) in goods" :key="index">
      <van-swipe-cell class="swipe-del">
        <van-row class="goods-item-detail">
          <van-col span="6" class="goods-item-img">
            <van-image width="1.5rem" height="1.5rem" fit="cover" :src="img + item.images0[0]" @click="selectDetail(item.id , item.state)" />
          </van-col>
          <van-col span="18" class="goods-item-col11" @click="selectDetail(item.id , item.state)">
            <div class="goods-item-name">
              <span>{{ item.name }}</span>
            </div>
            <div class="goods-item-stocknum">
              <span>库存 <span class="strongs">{{item.stocknum}}</span> 份</span><br>
            </div>
            <div class="goods-item-validtime">
              <!-- item.qualityperiod - 28800000ms + 86399000ms = 23:59:59 -->
              <span>有效期：{{ Date.parse(todays)>Date.parse(item.qualityperiod)-28800000+86399000?"已过期":item.qualityperiod }}</span><br>
            </div>
            <div class="goods-item-validtime">
              <span v-if="item.is_produce==1">创建日期：{{ item.createat | dateFilter }}</span>
              <span v-if="item.is_produce==2">购买日期：{{ item.createat | dateFilter }}</span>
            </div>
          </van-col>
        </van-row>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="delGoods(item.id)" />
        </template>
      </van-swipe-cell>
    </div>
  </div>
</template>

<script>
import { Dialog, Toast } from 'vant';
export default {
  name: "GoodsItem",
  props: ['goods', 'type', 'signs'],
  data () {
    return {
      show: false,
      showDel: false,
      shopid: 0,
      todays: new Date(),
    };
  },
  methods: {
    //商品详情
    selectDetail (gid, state) {
      this.$router.push({
        path: '/goodsdetail',
        query: {
          id: gid,
          type: this.type,
          state: state,
          signs: this.signs,
        }
      })
    },
    // 删除商品
    delGoods (gid) {
      Dialog.confirm({
        title: '提示',
        message: '确认删除该商品吗？',
      })
        .then(() => {
          this.$axios("/products/pdelete", {
            product_id: gid,//区别：1-返回自己的商品类型，2-返回购买时总部/经销商的商品类型
          })
            .then((res) => {
              if (res.data.code == 1) {
                Toast.success('删除成功')
                location.reload() // 刷新页面
              } else {
                Toast.fail('删除失败' + res.data.msg)
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          // on cancel
        })
    },
  },
};
</script>

<style lang="less" scoped>
.goods-item {
  display: flex;
  .strongs {
    font-weight: bold;
    color: #1bb89c;
  }
  .delete-button {
    height: 100%;
  }
  .swipe-del {
    width: 100%;
  }
  &-detail {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 15px 0;
    box-sizing: border-box;
  }
  &-col11 {
    align-self: center;
    padding: 0 10px;
  }
  &-img {
    display: flex;
    justify-content: center;
    align-items: center;
    /deep/ .van-image__img {
      border-radius: 8px;
    }
  }
  &-name {
    font-weight: bold;
    font-size: 28px;
    padding: 5px 0;
    align-self: center;
  }
  &-validtime,
  &-stocknum,
  &-source {
    padding: 5px 0;
    font-size: 22px;
  }
  &-operate {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    /deep/ .van-button {
      width: 80%;
      height: 50px;
      font-size: 22px;
    }
  }
}
</style>
